<!--
 * @Author: 陈心怡
 * @Date: 2024-09-20 14:20:30
 * @LastEditors: 陈心怡
 * @LastEditTime: 2024-09-20 16:27:35
 * @FilePath: \vue3-web-study\src\views\detail\index.vue
 * @Description: 
-->
<template>
  <div class="detail-container">
    <!-- 头图 -->
    <TopTheme
      height="200px"
      bg="toppic03.png"
      title="橙券新闻动态"
      des1="新闻动态抢先看，从能力输出到技术赋能，橙券从未放缓脚步，只为与您见证橙券成长的每一步！"
    />
    <div class="news-detail w1200">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/news' }">新闻资讯</el-breadcrumb-item>
        <el-breadcrumb-item>{{ info.title }}</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="news-detail-content">
        <h2>{{ info.title }}</h2>
        <div class="date">{{ info.updatedAt }}</div>
        <main v-html="info.content"></main>
      </div>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'NewsDetail' })
import { getNewsDetail } from '@/api/news'
import { reactive } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const info = reactive({
  title: '',
  content: '',
  updatedAt: ''
})

const res = async () => {
  const { id } = route.params
  const { data } = await getNewsDetail(id)
  const { title, content, updatedAt } = data
  info.title = title
  info.content = content
  info.updatedAt = updatedAt
}
res()
</script>

<style lang="scss" scoped>
.news-detail {
  margin-bottom: 60px;
  padding-top: 50px;
  .news-detail-content {
    min-height: 200px;
    & > h2 {
      margin-top: 60px;
      text-align: center;
      font-size: 30px;
    }
    & > .date {
      margin-top: 20px;
      text-align: center;
      font-size: 16px;
      color: #110808;
    }
    & > main {
      margin-top: 30px;
      font-size: 16px;
    }
  }
}
</style>
